<template>
  <div class="emoji-picker-container">
    <div class="emoji-trigger" @click="togglePicker">
      <el-icon><ChatDotRound /></el-icon>
      <span>表情包</span>
    </div>
    
    <div v-if="isOpen" class="emoji-picker" ref="pickerRef">
      <div class="picker-header">
        <span>选择表情包</span>
        <el-icon class="close-icon" @click="closePicker">
          <Close />
        </el-icon>
      </div>
      
      <div class="emoji-categories">
        <div 
          v-for="category in categories" 
          :key="category.name"
          class="category-tab"
          :class="{ active: activeCategory === category.name }"
          @click="activeCategory = category.name"
        >
          {{ category.icon }}
        </div>
      </div>
      
      <div class="emoji-grid">
        <div 
          v-for="emoji in currentEmojis" 
          :key="emoji"
          class="emoji-item"
          @click="selectEmoji(emoji)"
        >
          {{ emoji }}
        </div>
      </div>
      
      <div class="recent-emojis" v-if="recentEmojis.length > 0">
        <div class="recent-title">最近使用</div>
        <div class="emoji-grid">
          <div 
            v-for="emoji in recentEmojis" 
            :key="emoji"
            class="emoji-item"
            @click="selectEmoji(emoji)"
          >
            {{ emoji }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

/**
 * 表情包选择器组件
 * @description 提供丰富的表情包选择功能，支持分类和最近使用
 * @emits {string} select - 选择表情包时触发
 */
const emit = defineEmits(['select'])

const isOpen = ref(false)
const activeCategory = ref('常用')
const pickerRef = ref(null)
const recentEmojis = ref([])

// 表情包分类数据
const categories = [
  { name: '常用', icon: '😊', emojis: ['😊', '😂', '🤣', '❤️', '👍', '🎉', '🔥', '💯', '✨', '🌟', '💪', '👏', '🙏', '🤝', '💖', '😍'] },
  { name: '动物', icon: '🐱', emojis: ['🐱', '🐶', '🐼', '🐨', '🐯', '🦁', '🐸', '🐙', '🦄', '🦋', '🐝', '🦅', '🐬', '🐳', '🦕', '🦖'] },
  { name: '食物', icon: '🍕', emojis: ['🍕', '🍔', '🍟', '🌭', '🍿', '🧂', '🥨', '🥯', '🥖', '🧀', '🥚', '🥓', '🍗', '🥩', '🍖', '🦴'] },
  { name: '活动', icon: '⚽', emojis: ['⚽', '🏀', '🏈', '⚾', '🎾', '🏐', '🏉', '🎱', '🏓', '🏸', '🏊', '🏃', '🚴', '🎯', '🎮', '🎲'] },
  { name: '交通', icon: '🚗', emojis: ['🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐', '🚚', '🚛', '🚜', '🛴', '🚲', '🛵'] },
  { name: '符号', icon: '💎', emojis: ['💎', '💍', '💐', '💒', '💓', '💔', '💕', '💖', '💗', '💘', '💙', '💚', '💛', '💜', '🖤', '💝'] }
]

/**
 * 当前分类的表情包
 */
const currentEmojis = computed(() => {
  const category = categories.find(cat => cat.name === activeCategory.value)
  return category ? category.emojis : []
})

/**
 * 切换表情包选择器显示状态
 */
const togglePicker = () => {
  isOpen.value = !isOpen.value
}

/**
 * 关闭表情包选择器
 */
const closePicker = () => {
  isOpen.value = false
}

/**
 * 选择表情包
 * @param {string} emoji - 选中的表情包
 */
const selectEmoji = (emoji) => {
  // 添加到最近使用
  if (!recentEmojis.value.includes(emoji)) {
    recentEmojis.value.unshift(emoji)
    if (recentEmojis.value.length > 8) {
      recentEmojis.value.pop()
    }
    // 保存到本地存储
    localStorage.setItem('recentEmojis', JSON.stringify(recentEmojis.value))
  }
  
  emit('select', emoji)
  closePicker()
}

/**
 * 点击外部关闭选择器
 * @param {Event} event - 点击事件
 */
const handleClickOutside = (event) => {
  if (pickerRef.value && !pickerRef.value.contains(event.target)) {
    closePicker()
  }
}

// 生命周期钩子
onMounted(() => {
  // 从本地存储加载最近使用的表情包
  const saved = localStorage.getItem('recentEmojis')
  if (saved) {
    recentEmojis.value = JSON.parse(saved)
  }
  
  // 添加点击外部关闭事件
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.emoji-picker-container {
  position: relative;
  display: inline-block;
}

.emoji-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3);
}

.emoji-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);
}

.emoji-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 320px;
  max-height: 400px;
  overflow: hidden;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
}

.close-icon {
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.close-icon:hover {
  background: rgba(255, 255, 255, 0.2);
}

.emoji-categories {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #f8f9fa;
}

.category-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 16px;
}

.category-tab:hover {
  background: rgba(102, 126, 234, 0.1);
}

.category-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
}

.emoji-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}

.emoji-item:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: scale(1.1);
}

.recent-emojis {
  border-top: 1px solid #eee;
  padding: 12px;
}

.recent-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 600;
}

/* 滚动条样式 */
.emoji-grid::-webkit-scrollbar {
  width: 4px;
}

.emoji-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.emoji-grid::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.emoji-grid::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style> 